addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigImg = document.querySelector('.bigImg');
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    preview_img.addEventListener('mousemove', function(e) {
        var maskX = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
        var maskY = e.pageY - this.offsetTop - mask.offsetHeight / 2;
        var maskmaxX = this.offsetWidth - mask.offsetWidth;
        var maskmaxY = this.offsetHeight - mask.offsetHeight;
        maskX = maskX < 0 ? 0 : maskX;
        maskY = maskY < 0 ? 0 : maskY;
        maskX = maskX > maskmaxX ? maskmaxX : maskX;
        maskY = maskY > maskmaxY ? maskmaxY : maskY;
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        var bigImgX = bigImg.offsetWidth - big.offsetWidth;
        var bigImgY = bigImg.offsetHeight - big.offsetHeight;
        bigImg.style.left = -bigImgX / maskmaxX * maskX + 'px';
        bigImg.style.top = -bigImgY / maskmaxY * maskY + 'px';
    });

});